<template>
  <div class="form-table-item">
    <f-checkbox-group
      v-model:value="checkedRows"
      :options="list"
    ></f-checkbox-group>
    <div></div>
    <f-checkbox-group
      v-model:value="checkedColumns"
      :options="dyColumns"
    ></f-checkbox-group>

    <f-form-layout ref="form" :columns="columns" :model="model">
    </f-form-layout>
    <f-button @click="columns[1].props!.useRemove = false">
      隐藏删除按钮
    </f-button>
    <f-button @click="columns[1].props!.useAdd = false">隐藏新增按钮</f-button>
    <f-button @click="model.list!.push({ id: 'key' + Date.now() })">
      model增加行
    </f-button>
    <f-button @click="columns[1].props!.fixed = [3, 4]">
      固定两侧(左3右4)
    </f-button>
    <f-button @click="submit">提交</f-button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, computed, watchEffect } from "vue";
const checkedRows = ref([]);
const checkedColumns = ref([]);
const editMode = ref("row");
const tableColumns = computed(() => {
  return checkedColumns.value
    .map((item) => {
      const column = dyColumns.value.find((obj) => obj.value == item);

      const result = {
        editType: column?.type,
        field: item,
        title: column?.label,
        required: true,
        props: {
          dropdownClassName: "ignore-cell-click",
          options: column?.options,
          autofocus: true,
        },
        formatter: ({ row }) => {
          const items = column?.options?.filter((o) =>
            [].concat(row[item]).includes(o.value)
          );
          return items ? items.map((item) => item.label).join(",") : row[item];
        },
      };
      return result;
    })
    .concat({ type: "seq", title: "seq" });
});
const form = ref();
const model = ref<any>({ list: [] });
watchEffect(() => {
  model.value.list = checkedRows.value.map((item) => {
    return {
      id: item,
      ...checkedColumns.value.reduce((a, b: string) => {
        a[b] = "";
        return a;
      }, {}),
    };
  });
});
const list = ref([
  { label: "input", value: "1" },
  { label: "date", value: "2" },
  { label: "select", value: "3" },
  { label: "checkbox", value: "5" },
]);
const dyColumns = ref([
  { label: "姓名", value: "name", type: "input" },
  { label: "日期", value: "date", type: "date" },
  {
    label: "下拉",
    value: "select",
    type: "select",
    options: [
      { label: "下拉1", value: "1" },
      { label: "下拉2", value: "2" },
    ],
  },
  {
    label: "多选",
    value: "checkbox-group",
    type: "checkbox-group",
    options: [
      { label: "选项1", value: "1" },
      { label: "选项2", value: "2" },
    ],
  },
]);
const columns = ref([
  {
    field: "list",
    type: "form-edit-table",
    props: {
      title: "表格编辑",
      editMode: "cell",
      editRowTrigger: "click-cell",
      useRemove: true,
      multiple: false,
      useCheckbox: true,
      useAdd: true,
      fixed: [0, 0],
      actions: [],
      tableSlots: {},
      onChange: (obj) => {
        console.log("change:", obj);
      },
      onEditVisibleChange: (obj) => {
        console.log("visible change", obj);
      },
      columns: tableColumns,
    },
  },
]);

watch(
  model,
  (value) => {
    console.log("model change", { ...value });
  },
  { deep: true }
);
function submit() {
  form.value.validate();
}
</script>
